
<template>
  <!--右侧开始-->
  <div>


<div class="topSearch">
        <div class="leftBox" style="max-width:100%">
          <div class="searchbox">
            <em>学年：</em>
            <el-select v-model="select.xuenian" size="small" placeholder="请选择学年">
              <el-option v-for="(item,index) in select.yearList" :key="index" :label="item.timeName" :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="searchbox">
            <em>缴费方案名称：</em>
            <el-select v-model="select.paymentSchemeId" @change="changeTName" size="small" filterable placeholder="请选择缴费方案名称">
              <el-option v-for="item in select.paymentSchemeList" :key="item.projectId" :label="item.projectName" :value="item.projectId"
              ></el-option>
            </el-select>
          </div>

          <div class="searchbox">
          <em>缴费类型：</em>
          <el-select
            v-model="select.category"
            placeholder="输入学校名称"
            size="small"
            style="width:80px"
            clearable
          >
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in select.categoryList"
              :key="item.category"
              :label="item.categoryName"
              :value="item.category"
            ></el-option>
          </el-select>
        </div>

          <div class="searchbox">
          <em>校区：</em>
          <el-select
            v-model="select.schoolId"
            @change="changeSchool"
            placeholder="输入学校名称"
            size="small"
            width="80"
            clearable
          >
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in select.schoolList"
              :key="item.schoolId"
              :label="item.schoolName"
              :value="item.schoolId"
            ></el-option>
          </el-select>
        </div>

        <div class="searchbox">
          <em>年级：</em>
          <el-select
            v-model="select.gradeId"
            @change="changeGrade"
            placeholder="输入学校名称"
            size="small"
            style="width:80px"
            clearable
          >
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in select.gradeList"
              :key="item.gradeId"
              :label="item.gradeName"
              :value="item.gradeId"
            ></el-option>
          </el-select>
        </div>

        <div class="searchbox">
          <em>班级：</em>
          <el-select
            v-model="select.classId"
            placeholder="输入学校名称"
            size="small"
            :disabled="select.studentSource=='Sign'"
            style="width:80px"
            clearable
          >
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in select.classList"
              :key="item.classId"
              :label="item.className"
              :value="item.classId"
            ></el-option>
          </el-select>
        </div>

        <div class="searchbox">
          <em>缴费方式：</em>
          <el-select v-model="select.ptype" placeholder="输入学校名称" size="small" style="width:120px" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option label="线上缴费" value="OnLinePayment"></el-option>
            <el-option label="线下缴费" value="Supplement"></el-option>
            <el-option label="冲正" value="HongChong"></el-option>
          </el-select>
        </div>


          <div class="searchbox">
            <em>学生姓名或身份证号：</em>
            <el-input v-model="select.nameOrIDNumber" style="width:200px;" placeholder="请输入学生姓名或身份证号" clearable size="small"></el-input>
          </div>

          <div class="searchbox">
            <em>单据日期：</em>
            <el-date-picker v-model="select.dateB" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptionsBegin" default-time="00:00:00" style="width:190px;" :clearable="false" size="small"></el-date-picker>~
            <el-date-picker v-model="select.dateE" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptionsEnd" default-time="23:59:59" style="width:190px;" :clearable="false" size="small"></el-date-picker>
          </div>

          <div class="searchbox">
            <em>是否减免：</em>
            <el-radio-group v-model="select.isReduction" style="line-height: 40px;">
              <el-radio label="">全部</el-radio>
              <el-radio label="Y">是</el-radio>
              <el-radio label="N">否</el-radio>
            </el-radio-group>
          </div>

          <div class="searchbox">
            <el-button type="primary" @click="getData" size="mini">查询</el-button>
            <el-button type="primary" @click="exportOut" size="mini">导出</el-button>
          </div>

        </div>
        <!-- <div class="rightBox">
          <el-button type="primary" @click="exportExcel" size="mini">导出</el-button>
        </div> -->
        <div class="clear"></div>
      </div>
<div class="contentBox" style="height:86%;">
    <el-table :data="data" :row-class-name="tableRowClassName" :header-cell-style="headClass" border style="width: 100%" height="90%">
      <el-table-column label="单据日期" width="180">
        <template slot-scope="scope">
          <span>{{scope.row.operateTime|newBillCreateTime}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="projectName" label="缴费方案" width="180"></el-table-column>
      <el-table-column prop="billNumber" label="账单编号" width="200"></el-table-column>
      <el-table-column prop="serialNumber" label="收据号" width="200"></el-table-column>
      <el-table-column prop="schoolName" label="所在校区" width="200"></el-table-column>
      <el-table-column prop="graduateYear" label="毕业年份" width="120"></el-table-column>
      <el-table-column prop="categoryName" label="学生类型" width="150"></el-table-column>
      <el-table-column prop="studentName" label="学生姓名" width="120"></el-table-column>
      <el-table-column prop="idCard" label="身份证号" width="200"></el-table-column>
      <el-table-column label="就读班级">
        <template slot-scope="scope">
          <span v-if="scope.row.className==''||scope.row.className==null||scope.row.className==undefined">未分班级</span>
          <span v-else>{{scope.row.className}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="gradeName" label="就读年级" width="110"></el-table-column>
      <el-table-column prop="danjuzhuangtai" label="单据状态" width="110">
        <template slot-scope="scope">
            <span v-if="scope.row.paymentState=='UnPaid'">未缴费</span>
            <span v-if="scope.row.paymentState=='PaidUp'">已缴清</span>
            <span v-if="scope.row.paymentState=='UnPaidUp'">未缴清</span>
            <span v-if="scope.row.paymentState=='Refunded'">已退费</span>
          </template>
      </el-table-column>
      <el-table-column label="各项费用总计" width="110">
        <template slot-scope="scope">
          <el-button type="text" @click="see(scope.row)" v-if="scope.row.payableMoney==''||scope.row.payableMoney==null||scope.row.payableMoney==undefined">0.00</el-button>
          <el-button type="text" @click="see(scope.row)" v-else>{{scope.row.payableMoney|moneyStyle}}</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column label="各项费用明细" width="120">
        <template slot-scope="scope">
          <el-button @click="see(scope.row)" type="primary" size="mini">查看</el-button>
        </template>
      </el-table-column> -->
      <el-table-column label="减免金额" width="80">
        <template slot-scope="scope">
            <span v-if="scope.row.tuitionMoney==''||scope.row.tuitionMoney==null||scope.row.tuitionMoney==undefined" style="color:#e8851e;">0.00</span>
            <span :class="{fuFont:parseFloat(scope.row.tuitionMoney?scope.row.tuitionMoney:0).toFixed(2)*1000<0}" style="color:#e8851e;" v-else>{{scope.row.tuitionMoney|moneyStyle}}</span>
          </template>
      </el-table-column>
      <el-table-column label="支付方式">
        <el-table-column label="刷卡" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.cardMoney==''||scope.row.cardMoney==null||scope.row.cardMoney==undefined">0.00</span>
            <span :class="{fuFont:parseFloat(scope.row.cardMoney?scope.row.cardMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.cardMoney|moneyStyle}}</span>
          </template>
        </el-table-column>
        <el-table-column label="现金" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.cashMoney==''||scope.row.cashMoney==null||scope.row.cashMoney==undefined">0.00</span>
            <span :class="{fuFont:parseFloat(scope.row.cashMoney?scope.row.cashMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.cashMoney|moneyStyle}}</span>
          </template>
        </el-table-column>
        <el-table-column label="转账" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.transferMoney==''||scope.row.transferMoney==null||scope.row.transferMoney==undefined">0.00</span>
            <span :class="{fuFont:parseFloat(scope.row.transferMoney?scope.row.transferMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.transferMoney|moneyStyle}}</span>
          </template>
        </el-table-column>
        <el-table-column label="其他方式" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.otherMoney==''||scope.row.otherMoney==null||scope.row.otherMoney==undefined">0.00</span>
            <span :class="{fuFont:parseFloat(scope.row.otherMoney?scope.row.otherMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.otherMoney|moneyStyle}}</span>
          </template>
        </el-table-column>
        <el-table-column label="微信公众号" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.onLineMoney==''||scope.row.onLineMoney==null||scope.row.onLineMoney==undefined">0.00</span>
            <span :class="{fuFont:parseFloat(scope.row.onLineMoney?scope.row.onLineMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.onLineMoney|moneyStyle}}</span>
          </template>
        </el-table-column>

      </el-table-column>
      <el-table-column label="实收合计" width="110">
        <template slot-scope="scope">
          <!-- <span>{{scope.row.cardMoney+scope.row.cashMoney+scope.row.transferMoney}}</span> -->
          <el-button @click="see2(scope.row)" type="text" :class="{fuFont:parseFloat(heji(scope.row)).toFixed(2)*1000<0}" >{{heji(scope.row)}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="差异" width="80">
        <template slot-scope="scope">
          <span :class="{fuFont:parseFloat(chayi(scope.row)).toFixed(2)*1000<0}" >{{chayi(scope.row)}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="各项目实收金额明细" width="150">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.onLineMoney!='null'&&scope.row.onLineMoney!=null&&scope.row.onLineMoney!=undefined" @click="see1(scope.row)" type="primary" size="small">查看</el-button>
        </template>
      </el-table-column> -->
      <el-table-column prop="remark" label="备注" width="180"></el-table-column>
      <el-table-column prop="autoCause" label="冲正原因" width="180"></el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button @click="Printing(scope.row)" type="primary" size="mini">打印收据</el-button>
          <el-button :disabled="scope.row.paymentType=='OnLinePayment'" @click="changeShishou(scope.row)" type="primary" size="mini">补录修改</el-button>
        </template>
      </el-table-column>

      <!-- <el-table-column prop="yingshouheji" label="应收合计" width="80">
        <template slot-scope="scope">
          <span>{{ysheji(scope.row)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="chayi" label="差异" width="80">
        <template slot-scope="scope">
          <span>{{chayin(scope.row)}}</span>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="paging">
      <el-pagination background layout="total, prev, pager, next" @current-change="handleCurrentChange" :current-page.sync="pageIndex" :total="pageAll"></el-pagination>
    </div>
</div>

<!-- 弹层页面 -->
    <el-dialog title="各项费用明细" :visible.sync="dialogDetailed.show">
      <div class="layerBox">
      <div class="layerDetailedList">
        <dl v-for='d in dialogDetailed.data' :key="d.itemId">
          <dt>{{d.itemName}}</dt>
          <dd>{{d.money}}</dd>
        </dl>
      </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="dialogDetailed.show=!dialogDetailed.show">确定</el-button>
      </div>
    </el-dialog>


     <div class="printBox" id="printBox" v-if="dialogFormVisible2">
      <!-- <span class="close"  v-if="closebtshow" @click="closeImgLayer"><i class="el-icon-circle-close"></i></span> -->
      <div class="invoice" id="invoice1">
        <span class="close"  v-if="closebtshow" @click="closeImgLayer"><i class="el-icon-circle-close"></i></span>
            <div class="invoiceTop">
              <h3>
                <span class="logo"><img src="@/assets/img/zpLogo_03.png"></span>收款专用收据<em>NO.{{detailMesDY.serialNumber}}</em>
                <div class="clear"></div>
                </h3>

              <P><span>姓名:{{detailMesDY.studentName}}</span><span>年级：{{detailMesDY.gradeName}}</span><span>班级:<em v-if="detailMesDY.className==null||detailMesDY.className==''||detailMesDY.className==undefined">未设置分班</em><em v-else>{{detailMesDY.className}}</em></span><span>联系方式:{{detailMesDY.mobile}}</span><span>收款日期:{{timeSet.year}}年{{timeSet.mounth}}月{{timeSet.day}}日</span></P>
            </div>
            <div class="invoiceCenter">
              <div class="fakeTable">
                <div class="fakeTableHeader">
                  <div style="flex:4"><em>项目</em></div>
                  <div style="flex:2"><em>数量</em></div>
                  <div style="flex:2"><em>单价</em></div>
                  <div style="flex:9">
                    <div><em>金额</em></div>
                    <div><span>佰</span><span>拾</span><span>万</span><span>仟</span><span>佰</span><span>拾</span><span>元</span><span>角</span><span>分</span></div>
                  </div>
                  <div style="flex:2"><em>备注</em></div>
                </div>
                <div class="fakeTableBody">
                  <div class="fakeTableBodyN" v-for="(a,index) in detailMesDY.itemList" v-show="detailMesDY.isDetailed==1" :key="index">
                    <div style="flex:4"><em>{{a.itemName}}</em></div>
                    <div style="flex:2"><em>1</em></div>
                    <div style="flex:2"><em>{{a.money}}</em></div>
                    <div style="flex:9">
                      <div>
                        <span v-for="(b,index2) in 9-a.listMoney.length" :key="'B'+index2"></span>
                        <span v-for="(c,index3) in a.listMoney" :key="'C'+index3">{{c}}</span>
                      </div>
                    </div>
                    <div style="flex:2"></div>
                  </div>
                  <div class="fakeTableBodyN" v-if="tuifei">
                    <div style="flex:4"><em>减免金额</em></div>
                    <div style="flex:2"><em>1</em></div>
                    <div style="flex:2"><em>{{jianmianNum}}</em></div>
                    <div style="flex:9">
                      <div>
                        <span v-for="(b,index4) in 9-jianmianList.length" :key="'B'+index4"></span>
                        <span v-for="(c,index5) in jianmianList" :key="'C'+index5">{{c}}</span>
                      </div>
                    </div>
                    <div style="flex:2"></div>
                  </div>
                  <div class="fakeTableBodyN">
                    <div style="flex:6;">
                      <em v-if="detailMesDY.isDetailed!=1">
                        <font style="display: inline-block; width:66%;">收费项</font><font style="display: inline-block; width:35%;">1</font>
                      </em>
                      <em v-else></em>
                    </div>
                    <div style="flex:2;"><em>合计</em></div>
                    <div style="flex:9;">
                      <div>
                        <span v-for="(d,index4) in 9-totalMoney.length" :key="'D'+index4"></span>
                        <span v-for="(e,index5) in totalMoney" :key="'E'+index5">{{e}}</span>
                      </div>
                    </div>
                    <div style="flex:2;"></div>
                  </div>
                  <div class="fakeTableBodyN">
                    <div style="flex:17;">
                      <em ref="daxie" id="daxie" style="text-align:left; padding:10px;">金额大写(大写):
                        <!-- <i v-for="(f,index6) in 9-totalMoney.length" :key="'F'+index6"></i>
                        <i v-for="(g,index7) in totalMoney" :key="'G'+index7">{{g|newmoney}}{{(index7)}}</i> -->
                        <i>{{totalMoney[0]|newmoney}}佰</i>
                        <i>{{totalMoney[1]|newmoney}}拾</i>
                        <i>{{totalMoney[2]|newmoney}}万</i>
                        <i>{{totalMoney[3]|newmoney}}仟</i>
                        <i>{{totalMoney[4]|newmoney}}佰</i>
                        <i>{{totalMoney[5]|newmoney}}拾</i>
                        <i>{{totalMoney[6]|newmoney}}元</i>
                        <i>{{totalMoney[7]|newmoney}}角</i>
                        <i>{{totalMoney[8]|newmoney}}分</i>
                        <!-- <i>拾</i><i>万</i><i>仟</i><i>佰</i><i>拾</i><i>元</i><i>角</i><i>分</i> -->
                      </em>
                      </div>
                    <div style="flex:2;"><em></em></div>
                  </div>
                  <div class="fakeTableBodyN">
                    <div style="flex:19; border-top:1px solid #000;">
                      <em style="text-align:left; padding:10px;">
                        <i>收款方式:</i>
                        <i>现金
                          <font v-if="detailMesDY.cashMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>转账<font v-if="detailMesDY.transferMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>刷卡<font v-if="detailMesDY.cardMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>微信公众号<font v-if="detailMesDY.onLineMoney=='1'||detailMesDY.onLineMoney==null" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>其他方式<font v-if="detailMesDY.otherMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><tt v-else></tt></i>
                      </em>
                      </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="imgBox" v-if="detailMesDY.sealUrl">
              <img class="yin" :src="$store.state.userModule.phurl+detailMesDY.sealUrl">
            </div>
            <div class="invoiceBottom">
              <p><span>开票单位:{{schoolName}}</span><span style="float:right">收款人:<em v-if="detailMesDY.onLineMoney=='1'||detailMesDY.onLineMoney==null">线上收款</em><em v-else>线下收款</em></span></p>
            </div>
          </div>
      <div class="bts" v-if="btshow"><el-button type="primary" @click="printImg" style="width:120px">打印</el-button></div>
    </div>

    <el-dialog title="实收修改" :visible.sync="shishouShow" width="70%">
      <div class="layerMaxHeight layerBox">
        <div class="baseMessage">
          <ul>
            <li><em>姓名：</em><strong style="color:#ff6a00; font-size:16px;">{{userData.studentName}}</strong></li>
            <li><em>年级：</em>{{userData.gradeName}}</li>
            <li><em>学生缴费类型：</em>{{userData.categoryName}}</li>
          </ul>
        </div>
        <el-form :model="form" label-width="150px" size="small">
        <el-form-item label="请选择补录时间">
          <el-date-picker v-model="form.time" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptionsEnd" type="datetime" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="补录金额">
          <div class="rightCon">
            <div class="payListBox">
              <dl v-for="(a,index) in form.itemList" :key="index">
                <dt>{{a.itemName}}</dt>
                <dd>{{a.money}}
                  <!-- <el-input-number v-model="a.money" :class="{ 'fu' :parseFloat(a.money?a.money:0).toFixed(2)*1000<0 }" :precision="2" :max="9999999999999" :controls="false" :step="0.01"></el-input-number> -->
                  </dd>
              </dl>
              <dl>
                <dt>合计</dt>
                <dd>{{heji1()}}</dd>
              </dl>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="请填写方式和金额">
          <div class="rightCon">
            <div class="payListBox">
              <dl>
                <dt>刷卡</dt>
                <dd><el-input-number v-model="form.cardMoney" :class="{ 'fu' :parseFloat(form.cardMoney?form.cardMoney:0).toFixed(2)*1000<0 }" :precision="2" :controls="false" :max="9999999999999" :step="0.01"></el-input-number></dd>
              </dl>
              <dl>
                <dt>现金</dt>
                <dd>
                  <el-input-number v-model="form.cashMoney" :class="{ 'fu' :parseFloat(form.cashMoney?form.cashMoney:0).toFixed(2)*1000<0 }" :precision="2" :controls="false" :max="9999999999999" :step="0.01"></el-input-number>
                  </dd>
              </dl>
              <dl>
                <dt>转账</dt>
                <dd><el-input-number v-model="form.transferMoney" :class="{ 'fu' :parseFloat(form.transferMoney?form.transferMoney:0).toFixed(2)*1000<0 }" :precision="2" :controls="false" :max="9999999999999" :step="0.01"></el-input-number></dd>
              </dl>
              <dl>
                <dt>其它方式</dt>
                <dd><el-input-number v-model="form.otherMoney" :class="{ 'fu' :parseFloat(form.otherMoney?form.otherMoney:0).toFixed(2)*1000<0 }" :precision="2" :controls="false" :max="9999999999999" :step="0.01"></el-input-number></dd>
              </dl>
              <dl>
                <dt>合计</dt>
                <dd>{{parseFloat((parseFloat(form.cardMoney?form.cardMoney:0).toFixed(2)*1000+parseFloat(form.cashMoney?form.cashMoney:0).toFixed(2)*1000+parseFloat(form.transferMoney?form.transferMoney:0).toFixed(2)*1000+parseFloat(form.otherMoney?form.otherMoney:0).toFixed(2)*1000)/1000).toFixed(2)|kexuejishu}}</dd>
              </dl>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="补录说明">
          <el-input type="textarea" :rows="5" maxlength="200" show-word-limit placeholder="请输入内容" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="SaveChange">确定</el-button>
      </div>
    </el-dialog>

  </div>
  <!--右侧结束-->
</template>

<script>
import html2canvas from 'html2canvas';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: "receivable",
  data() {
    return {
      pageIndex:1,
      pageAll:0,
      select: {
        xuenian:'',
        yearList:[],
        schoolList: [],
        schoolId: "",
        gradeList: [],
        gradeId: "",
        category: "",
        categoryList: [],
        classList: [],
        classId: "",
        paymentSchemeList: [],
        paymentSchemeId: [],
        name: "",
        nameOrIDNumber: "",
        isReduction: "",
        ptype:"",
        dateB: "",
        dateE: "",
        studentSource:''
      },
      data: [
        // {
        //   jiaofeifangan: "2020-2021学年学费缴纳",
        //   xueshengleixing: "协议公费生",
        //   suozaixiaoqu: "度假区校区度假区校区",
        //   xueshengxingming: "张三",
        //   shenfenzhenghao: "320323200701011234",
        //   jiudunianji: "初一",
        //   gexiangfeiyongzongji: 19000,
        //   id: 100,
        //   jianmianjine: 0,
        //   yingshoujine: 100000
        // }
      ],
      dialogDetailed: {
        show: false,
        student: [],
        data: []
      },
      dialogFormVisible2:false,
      tuifei:true,
      detailMesDY:{},
      schoolName:'',
      jianmianList:[],
      jianmianNum:0,
      totalMoney:[],
      timeSet:{
        year:'',
        mounth:'',
        day:''
      },
      showViewer:false,
      btshow:true,
      closebtshow:true,
      url:'',
      imgUrl:'',
      shishouShow:false,
      frozenTime:'',
      form: {
        proejctId:'',
        studentId:'',
        studentSource:'',
        time:'',
        serialId:'',
        itemList:[],
        cardMoney:0,
        cashMoney:0,
        transferMoney:0,
        otherMoney:0,
        remark:''
      },
      userData:{},
      pickerOptionsBegin:{
         disabledDate:time=>{
          return time.getTime() > new Date(this.select.dateE).getTime();
        }
      },
      pickerOptionsEnd:{
         disabledDate:time=>{
          return time.getTime() < new Date(this.select.dateB).getTime();
        }
      }
    }
  },
  components: { ElImageViewer },
  watch:{
    "select.xuenian":function(v){
      if(v){
        this.select.paymentSchemeId = "";
        this.select.schoolId = "";
        this.select.gradeId = "";
        this.data = [];
        this.getSearchP();
      }
    },
    "select.category":function(v){
      if(v){
        this.getData();
      }
    },
    "select.schoolId":function(v){
      if(v){
        this.getData();
      }
    },
    "select.gradeId":function(v){
      if(v){
        this.getData();
      }
    },
    "select.classId":function(v){
      if(v){
        this.getData();
      }
    }
  },
  filters:{
    newBillCreateTime(val){
      if(!val)return '--';
      return val.substr(0,19);
    },
    newmoney:function(val){
      var oldfont = "";
      if(!val)return '--';
      switch(val){
        case "0":
          oldfont = "零";
          break;
          case "1":
          oldfont = "壹";
          break;
          case "2":
          oldfont = "贰";
          break;
          case "3":
          oldfont = "叁";
          break;
          case "4":
          oldfont = "肆";
          break;
          case "5":
          oldfont = "伍";
          break;
          case "6":
          oldfont = "陆";
          break;
          case "7":
          oldfont = "柒";
          break;
          case "8":
          oldfont = "捌";
          break;
          case "9":
          oldfont = "玖";
          break;
          default:
          oldfont = "";
      }
      return oldfont;
    },
    moneyStyle(val){
      var nm = 0;
      nm = parseFloat(val).toFixed(2);
      return nm;
    },
    kexuejishu(val){
      if(/\d+\.?\d*e[\+\-]*\d+/i.test(val)) {    //正则匹配科学计数法的数字
          var zero = '0',                                    //
            parts = String(val).toLowerCase().split('e'), //拆分成系数和指数
            e = parts.pop(),//存储指数
            l = Math.abs(e), //取绝对值，l-1就是0的个数
            sign = e/l,          //判断正负
            coeff_array = parts[0].split('.');   //将系数按照小数点拆分
          if(sign === -1) {           //如果是小数
            val = zero + '.' + new Array(l).join(zero) + coeff_array.join('');   //拼接字符串，如果是小数，拼接0和小数点
          } else {
            var dec = coeff_array[1];
            if(dec) l = l - dec.length;  //如果是整数，将整数除第一位之外的非零数字计入位数，相应的减少0的个数
            val = coeff_array.join('') + new Array(l+1).join(zero);    //拼接字符串，如果是整数，不需要拼接小数点
          }
        }

        return val;
    }
  },
  mounted() {
    var that = this;
    that.getSchoolYearList();
    // that.getSearchP();
    that.$nextTick(()=>{
      setTimeout(function(){
        that.getData();
      },800)
    })
  },
  methods: {
    // 头部样式
    headClass:function(){
      return 'text-align: center;'
    },
    //  TODO: 实收合计
    heji:function(obg){
      var numq = 0;
      numq = (parseFloat(obg.cardMoney==null?0:obg.cardMoney)*1000+parseFloat(obg.cashMoney==null?0:obg.cashMoney)*1000+parseFloat(obg.transferMoney==null?0:obg.transferMoney)*1000+parseFloat(obg.otherMoney==null?0:(obg.autoPayableCount==1?0:obg.otherMoney))*1000+parseFloat(obg.onLineMoney==null?0:obg.onLineMoney)*1000)/1000;
      return parseFloat(numq).toFixed(2);
    },
    // TODO: 应收合计
    ysheji:function(obg){
      var numq = 0;
      numq = (parseFloat(obg.cardMoney==null?0:obg.cardMoney)*1000+parseFloat(obg.cashMoney==null?0:obg.cashMoney)*1000+parseFloat(obg.transferMoney==null?0:obg.transferMoney)*1000)/1000;
      return numq;
    },
    // 差异
    chayi:function(obg){
      var numq = 0;
      numq = (parseFloat(obg.payableMoney==null?0:obg.payableMoney)*1000-parseFloat(obg.tuitionMoney==null?0:obg.tuitionMoney)*1000-parseFloat(obg.paidMoney==null?0:obg.paidMoney)*1000)/1000;
      return parseFloat(numq).toFixed(2);
    },
    // TODO:获取学年列表
    getSchoolYearList(){
      this.$api.systemSetup.GetSearchList("time").then(res=>{
        console.log("获取学年列表",res)
        this.select.yearList = res.data.result.timeList;
        this.select.xuenian = res.data.result.timeList[0].id;
        this.getSearchP();
      })
    },
    // TODO:搜索项目
    getSearchP(project) {
      this.$api.reportForm.GetSearch("project","002",this.select.xuenian,this.select.paymentSchemeId,this.select.schoolId,this.select.gradeId).then(res => {
        //console.log("获取缴费项",res);
        this.select.paymentSchemeList = res.data.result.projectList;
        this.select.paymentSchemeId = res.data.result.projectList[0].projectId;
        this.select.studentSource = res.data.result.projectList[0].studentSource;
        this.getSearchS();
      });
    },
    // TODO:获取搜索学校
    getSearchS:function(){
      this.$api.reportForm.GetSearch("school","002",this.select.xuenian,this.select.paymentSchemeId,this.select.schoolId,this.select.gradeId).then(res1 => {
          //console.log("获取学校列表",res1);
          this.select.schoolList = res1.data.result.schoolList;
          this.select.schoolId = res1.data.result.schoolList[0].schoolId;
          this.getSearchG();
          this.getData();
        });
    },
    //TODO: 获取搜索条件
    getSearchG:function(){
      this.$api.reportForm.GetSearch("gradeAndCategory","002",this.select.xuenian,this.select.paymentSchemeId,this.select.schoolId,this.select.gradeId).then(res1 => {
          //console.log("获取年级缴费类型",res1);
          this.select.categoryList = res1.data.result.categoryList;
          this.select.gradeList = res1.data.result.gradeList;
        });
    },
//TODO: 获取班级
    getSearchC:function(){
      this.$api.reportForm.GetSearch("class","002",this.select.xuenian,this.select.paymentSchemeId,this.select.schoolId,this.select.gradeId).then(res1 => {
          //console.log("获取班级",res1);
          this.select.classList = res1.data.result.classList;
        });
    },
    // 缴费名称改变
    changeTName:function(event){
      this.select.schoolId="";
      for(var a=0,lenn = this.select.paymentSchemeList.length;a<lenn;a++){
        if(this.select.paymentSchemeList[a].projectId==event){
          this.select.studentSource = this.select.paymentSchemeList[a].studentSource;
        }
      }
      this.getSearchS()
    },
    // 学校改变
    changeSchool:function(){
      this.select.gradeId="";
      this.getSearchG()
    },
    // 年级改变
    changeGrade:function(){
      this.select.classId="";
      this.getSearchC()
    },
    // FIXME:获取报表列表
    getData:function(){
      this.select.dateE = this.select.dateE.replace(/00:00:00/,"23:59:59");
      var params = {projectId:this.select.paymentSchemeId,schoolId:this.select.schoolId,gradeId:this.select.gradeId,classId:this.select.classId,category:this.select.category, studentQuery:this.select.nameOrIDNumber, startBillCreateTime:this.select.dateB, endBillCreateTime:this.select.dateE, isTuition:this.select.isReduction, paymentType:this.select.ptype}
      this.$api.reportForm.GetNetReceiptsList("list",params,this.pageIndex).then(res => {
        //console.log("获取实收列表",res);
        this.data = res.data.result.list;
        this.pageIndex = res.data.result.page;
        this.pageAll = res.data.result.total;
      });
    },
    see(k) {
      this.dialogDetailed.data =[];
      this.$api.reportForm.WatchPaymentAmount(k.projectId, k.schoolId, k.sectionId, k.gradeId, k.studentId, k.paymentCategory,k.isResidence, k.isMilitaryTraining, k.isPhysicalExamination).then(res=>{
        //console.log("查看缴费项目请",res);
        this.dialogDetailed.data =  res.data.result;
      })
      this.dialogDetailed.show = true;
    },
    see1(c){
      this.dialogDetailed.data =[];
      this.$api.reportForm.WatchStudentAmount(c.projectId, c.studentId, c.serialId, c.paymentType,c.isResidence, c.isMilitaryTraining, c.isPhysicalExamination).then(res=>{
        //console.log("查看学生缴费",res);
        res.data.result.forEach(event=>{
          if(event.autoPayableCount==1){
            event.money=0;
          }
        })
        this.dialogDetailed.data =  res.data.result;
      })
      this.dialogDetailed.show = true;
    },
    see2(p){
      // console.log(p);
      // if(p.paymentType=='OnLinePayment'){
      //   this.see(p);
      // }else{
        this.see1(p);
      // }
    },
    exportExcel() {
      this.select.dateE = this.select.dateE.replace(/00:00:00/,"23:59:59");
      var params = {projectId:this.select.paymentSchemeId,schoolId:this.select.schoolId,gradeId:this.select.gradeId,classId:this.select.classId,category:this.select.category, studentQuery:this.select.nameOrIDNumber, startBillCreateTime:this.select.dateB, endBillCreateTime:this.select.dateE, isTuition:this.select.isReduction, paymentType:this.select.ptype}
      this.$api.reportForm.GetNetReceiptsList("export",params,this.pageIndex).then(res => {
        //console.log("获取列表导出",res);
      });
    },
    // 打印数据
    Printing(obg){
      this.jianmianList = [];
      this.detailMesDY = {};
      this.schoolName = obg.schoolName;
      this.tuifei = true;
      this.$api.reportForm.PrintingFrom(obg.projectId,obg.studentId,obg.serialId,obg.paymentType).then(res=>{
        //console.log("获取打印数据",res);
        this.detailMesDY = res.data.result;
        this.jianmianList =[];
        if(res.data.result.tuitionMoney==null||res.data.result.tuitionMoney==undefined||res.data.result.tuitionMoney==""||parseFloat(res.data.result.tuitionMoney).toFixed(2)*1000==0){
          this.tuifei = false;
        }
        // var riqi = new Date();
        // this.timeSet.year = riqi.getFullYear();
        // this.timeSet.mounth = riqi.getMonth();
        // this.timeSet.day = riqi.getDate();
        // this.timeSet.year = this.detailMesDY.date.slice(0,4);
        // this.timeSet.mounth = this.detailMesDY.date.slice(6,9);
        // this.timeSet.day = this.detailMesDY.date.slice(11,13);
        var dateListN = this.detailMesDY.date.split("-");
        this.timeSet.year = dateListN[0];
        this.timeSet.mounth = dateListN[1];
        this.timeSet.day = dateListN[2].slice(0,2);
        this.setMoneys();
        this.dialogFormVisible2 = true;
      })
    },
    // TODO:设置数字
    setMoneys:function(){
      var that = this;
      that.jianmianList = [];
      var newList = new Array();
      var tNum = 0;
      that.detailMesDY.itemList.forEach(function(val,index){
        that.detailMesDY.itemList[index].money = (parseFloat(val.money).toFixed(2)*1000)/1000;
        that.detailMesDY.itemList[index].listMoney = [];
        tNum +=parseFloat(val.money).toFixed(2)*1000;
        var list = new Array();
        var arr = parseFloat(val.money).toFixed(2).split('');
        for(var i=0,len = arr.length;i<len;i++){
          list.push(arr[i]);
        }
        that.detailMesDY.itemList[index].listMoney = that.dropListE('.',list);
      })
      that.jianmianNum = parseFloat(that.detailMesDY.tuitionMoney==null?0:parseFloat(that.detailMesDY.tuitionMoney).toFixed(2)*1000>0?that.detailMesDY.tuitionMoney:-(that.detailMesDY.tuitionMoney)).toFixed(2);
      var allNum = (tNum-parseFloat(that.detailMesDY.tuitionMoney==null?0:parseFloat(that.detailMesDY.tuitionMoney).toFixed(2)*1000>0?that.detailMesDY.tuitionMoney:-(that.detailMesDY.tuitionMoney)).toFixed(2)*1000)/1000;
      that.detailMesDY.tuitionMoney = parseFloat(that.detailMesDY.tuitionMoney==null?0:parseFloat(that.detailMesDY.tuitionMoney).toFixed(2)*1000>0?that.detailMesDY.tuitionMoney:-(that.detailMesDY.tuitionMoney)).toFixed(2).split('');
      for(var p=0,lenn = that.detailMesDY.tuitionMoney.length;p<lenn;p++){
        that.jianmianList.push(that.detailMesDY.tuitionMoney[p]);
      }
      that.jianmianList = that.dropListE('.',that.jianmianList);
      // var allNum = (tNum-parseFloat(that.detailMesDY.tuitionMoney==null?0:-(that.detailMesDY.tuitionMoney)).toFixed(2)*1000)/1000;
      that.totalMoney = that.dropListE('.',(parseFloat(allNum).toFixed(2)*1000>0?allNum:-(allNum)).toFixed(2).split(''));
      var lastIndex = 9-that.totalMoney.length;
      for(var a=0,lenn =lastIndex;a<lenn;a++){
        that.totalMoney.unshift("");
      }
      console.log(lastIndex);
      console.log(that.detailMesDY.itemList);
      console.log(that.totalMoney);
      console.log(that.jianmianList);
    },
    // TODO:数组删除
    dropListE:function(str,arr){
      var index = arr.indexOf(str);
      arr.splice(index,1);
      return arr;
    },
    saveImg:function(){
      var that = this;
      html2canvas(document.getElementById("invoice"),{scale:2}).then(function(canvas){
        that.imgUrl = canvas.toDataURL("image/png");
      })
      that.showViewer = true;
      // that.dialogFormVisible2 = false;
    },
    printImg(){
      this.btshow = false;
      setTimeout(function(){
        window.print(document.getElementById("printBox"));
      },1000)
    },
    closeImgLayer:function(){
      this.detailMesDY = {};
      this.totalMoney = [];
      this.jianmianList = [];
      this.dialogFormVisible2 = false;
      this.btshow = true;
      this.getData();
    },
    // 关闭查看器
    closeViewer() {
      this.dialogFormVisible2 = false
    },
    // 分页页面切换
    handleCurrentChange:function(val){
      this.pageIndex = val;
      this.getData();
    },
    // 导出报表
    exportOut:function(){
      this.select.dateE = this.select.dateE.replace(/00:00:00/,"23:59:59");
      var params = {projectId:this.select.paymentSchemeId,schoolId:this.select.schoolId,gradeId:this.select.gradeId,classId:this.select.classId,category:this.select.category, studentQuery:this.select.nameOrIDNumber, startBillCreateTime:this.select.dateB, endBillCreateTime:this.select.dateE, isTuition:this.select.isReduction, paymentType:this.select.ptype}
      this.$api.reportForm.GetNetReceiptsList("export",params,this.pageIndex).then(res => {
        //console.log("导出实收报表",res);
        window.open(res.data.result)
      });
    },
    changeShishou(obg){
      this.userData = obg;
      this.schoolName = obg.schoolName;
      this.form.remark="";
      this.form.itemList=[];
      this.form.cardMoney = 0;
      this.form.cashMoney = 0;
      this.form.transferMoney = 0;
      this.form.otherMoney = 0;
      this.$api.reportForm.GetDetail(obg.serialId).then(res=>{
        //console.log("获取修改详情",res);
        this.frozenTime = res.data.result.frozenTime;
        this.setDate();
        this.form.itemList = res.data.result.itemList;
        this.form.projectId = obg.projectId;
        this.form.studentId= obg.studentId;
        this.form.studentSource=obg.studentSource;
        this.form.cardMoney =  res.data.result.paymentSerial.cardMoney;
        this.form.cashMoney =  res.data.result.paymentSerial.cashMoney;
        this.form.otherMoney =  res.data.result.paymentSerial.otherMoney;
        this.form.transferMoney =  res.data.result.paymentSerial.transferMoney;
        this.form.remark=res.data.result.paymentSerial.remark;
        this.form.time = res.data.result.paymentSerial.operateTime;
        this.form.serialId = obg.serialId
        this.shishouShow = true;
      })
    },
    // 设置日期
    setDate(){
      var stime = new Date();
      var ftime = new Date(this.frozenTime);
      if((new Date(this.frozenTime).getFullYear()==new Date().getFullYear())&&(new Date(this.frozenTime).getMonth()==new Date().getMonth())&&(new Date(this.frozenTime).getDate()==new Date().getDate())){
        this.form.time =  new Date(stime.valueOf()+1*24*60*60*1000).getFullYear()+'-'+(new Date(stime.valueOf()+1*24*60*60*1000).getMonth()+1).toString().padStart(2,'0')+'-'+(new Date(stime.valueOf()+1*24*60*60*1000).getDate().toString().padStart(2,'0'))+" "+(new Date(stime.valueOf()+1*24*60*60*1000).getHours()).toString().padStart(2,'0')+":"+(new Date(stime.valueOf()+1*24*60*60*1000).getMinutes()).toString().padStart(2,'0')+":"+(new Date(stime.valueOf()+1*24*60*60*1000).getSeconds()).toString().padStart(2,'0');
      }else if(stime.getTime()<ftime.getTime()){
        this.form.time = new Date(ftime.valueOf()+1*24*60*60*1000).getFullYear()+'-'+(new Date(ftime.valueOf()+1*24*60*60*1000).getMonth()+1).toString().padStart(2,'0')+'-'+(new Date(ftime.valueOf()+1*24*60*60*1000).getDate().toString().padStart(2,'0'))+" "+(new Date(ftime.valueOf()+1*24*60*60*1000).getHours()).toString().padStart(2,'0')+':'+(new Date(ftime.valueOf()+1*24*60*60*1000).getMinutes()).toString().padStart(2,'0')+':'+(new Date(ftime.valueOf()+1*24*60*60*1000).getSeconds()).toString().padStart(2,'0');
      }else{
      this.form.time = stime.getFullYear()+'-'+(stime.getMonth()+1).toString().padStart(2,'0')+'-'+stime.getDate().toString().padStart(2,'0')+" "+stime.getHours().toString().padStart(2,'0')+':'+stime.getMinutes().toString().padStart(2,'0')+':'+stime.getSeconds().toString().padStart(2,'0');
      }
    },
    // 合计内容
    heji1:function(){
      var hejiNew = 0;
      this.form.itemList.forEach(event=>{
        hejiNew += parseFloat(event.money).toFixed(2)*1000/1000;
      })
      return parseFloat(hejiNew).toFixed(2)*1000/1000;
    },
    // 保存修改
    SaveChange(){
      if(this.form.time==""){
        this.$message({
          message:'请选择补录时间！',
          type:'warning'
        })
        return;
      }

      if(this.heji1() != (parseFloat(this.form.cardMoney).toFixed(2)*1000+parseFloat(this.form.cashMoney).toFixed(2)*1000+parseFloat(this.form.transferMoney).toFixed(2)*1000+parseFloat(this.form.otherMoney).toFixed(2)*1000)/1000){
        this.$message({
          message:'填写金额与实际补录金额不一致',
          type:'warning'
        })
        return;
      }

      this.$api.reportForm.SaveNetReceiptsChnage(this.form.serialId,this.form.time,this.form.remark,this.form.cardMoney,this.form.cashMoney,this.form.transferMoney,this.form.otherMoney).then(res=>{
        //console.log("保存补录修改",res);
        if(res.data.status=='SUCCESS'){
          this.$message({
            message:'补录修改成功',
            type:'success'
          })
          this.shishouShow = false;
          this.getData();
        }

      })

    },
    // 表格颜色设置
    tableRowClassName({row,rowIndex}){
      if(row.paymentType==='HongChong'){
        return 'warning-row';
      }
      return '';
    }
  }
};
</script>

<style>
.el-table .warning-row {
    background: #fff9e8;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
